<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2024-03-20 08:57:01
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2024-03-21 14:32:47
 * @FilePath: \dyh-vue3-demo\src\views\demo\my-table.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <my-card class="card">
    <el-button @click="handleClick(1)">refresh</el-button>
    <BaseTable :tableObj="tableObj"></BaseTable>
    <!-- 分页器 -->
    <!-- <el-pagination
      v-model:current-page="pagination.current"
      :page-size="pagination.size"
      layout="total, sizes, prev, pager, next, jumper"
      background
      :page-sizes="pagination.sizeOption"
      :total="pagination.total"
      @size-change="pagination.onSizeChange"
      @current-change="pagination.onPageChange"
    /> -->
    <page v-model:page="pagination.current" v-model:size="pagination.size" :loadList="refresh" :total="pagination.total"/>
  </my-card>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { getTableDataApi } from "../../api/demo/demo";
import { useTable } from "../../utils/customHooks";
import type { TableObj } from '@/components/table/types';
import MyCard from "@/components/card/MyCard.vue";
import Page from "@/components/page/Page.vue";
import BaseTable from '@/components/table/BaseTable.vue';

const [data, refresh, pagination] = useTable(
  getTableDataApi,
  {
    path: {
      data: "data", // 属性是前端规定好的参数名，值为后端返回的参数名
      total: "total",
      page: "page",
      size: "size",
    },
    immediate: true,
  },
  // {
  //   id: 12,
  // },
);
const tableObj = ref<TableObj>({
  tableHeader: [
    { label: 'Date', value: 'date' },
    { label: 'Name', value: 'name' },
    { label: 'Address', value: 'address' },
  ],
  tableData: [],
})
onMounted(() => {
  refresh(); // id=12
  tableObj.value.tableData = data;
})
const handleClick = (id:number) => {
  refresh({id: 1});
}
</script>

<style lang="scss" scoped>
.card {
  margin-bottom: 20px;
  .icon-box {
    font-size: 16px;
    font-weight: 700;
    margin-top: 16px;
    .iconfont {
      margin-right: 5px;
    }
  }
  .table-box {
    margin: 20px 0;
  }
}
</style>
